import React from 'react';
import {LucideIcon} from "lucide-react";
import {IconType} from "react-icons/lib";
import {Button} from "@/components/ui/button";
import Link from "next/link";
import {useWorkspaceId} from "@/hooks/social/use-workspace-id";
import {cva, type  VariantProps} from "class-variance-authority";
import {cn} from "@/lib/utils";

// 模仿shadcn-ui
const sidebarItemVariants = cva(
    `flex items-center gap-1.5 justify-start font-normal h-7 px-[18px] text-sm overflow-hidden`,
    {
        variants: {
            variant: {
                default: 'text-[#f9edffcc]',
                active: 'text-[#481349] bg-white/90 hover:bg-white/90'
            }
        },
        defaultVariants: {
            variant: "default"
        }
    }
)

interface Props {
    label: string
    id: string
    icon: LucideIcon | IconType
    variant?: VariantProps<typeof sidebarItemVariants>['variant']
}

const SidebarItem = ({label, id, icon: Icon, variant}: Props) => {
    const workspaceId = useWorkspaceId()

    return (
        <Button
            className={cn(sidebarItemVariants({variant}))}
            variant={'transparent'}
            size={'sm'}
            asChild
        >
            <Link href={`/social/workspace/${workspaceId}/channel/${id}`}>
                <Icon className={`size-3.5 mr-1 shrink-0`}/>
                <span className={`text-sm truncate`}>{label}</span>
            </Link>
        </Button>
    );
};

export default SidebarItem;